<template>
  <div>
    <el-card>
      <el-form :inline="true">
        <el-form-item label="一级分类">
          <el-select :disabled="key_attr==0?false:true" v-model="useCategoryStore.catId" style="width: 100px;" @change="handleC1Change">
            <el-option v-for="item in useCategoryStore.category1List" :key="item.id" :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select :disabled="key_attr==0?false:true" style="width: 100px;" v-model="useCategoryStore.cat2Id" @change="handleC2Change">
            <el-option v-for="item in useCategoryStore.category2List" :key="item.id" :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select :disabled="key_attr==0?false:true" style="width: 100px;" v-model="useCategoryStore.cat3Id">
            <el-option v-for="item in useCategoryStore.category3List" :key="item.id" :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, watch } from 'vue'
import { reqAttr } from '@/api/product/attr';
import { AttrResponseData} from '@/api/product/attr/type';
// 引入仓库
import CategoryStore from '@/store/modules/category'
let useCategoryStore = CategoryStore();

// 接收attr父组件key值
defineProps(['key_attr']);

onMounted(() => {
  // 获取一级分类数据
  getC1();
})
const getC1 = () => {
  useCategoryStore.getCategory1List();
}
// 一级分类下拉菜单的change事件 (当选中一级分类id值时触发)
const handleC1Change = () => {
  // 清空二三级分类数据
  useCategoryStore.cat2Id = '';
  useCategoryStore.cat3Id = '';
  useCategoryStore.category2List = [];
  useCategoryStore.category3List = [];

  // 获取二级分类数据
  useCategoryStore.getCategory2List();
}
// 二级分类下拉菜单的change事件 (当选中二级分类id值时触发)
const handleC2Change = () => {
  // 清空三级分类数据
  useCategoryStore.cat3Id = '';
  useCategoryStore.category3List = [];
  // 获取三级分类数据
  useCategoryStore.getCategory3List();
}

</script>

<style lang='scss' scoped></style>